import QtQuick
import QtCore

Item {
    id: controlArea
    implicitWidth: controlRow.childrenRect.width + 10
    Settings {
        id: settings
        category: "Player"
        property alias volume: _volumeBar.volume
    }

    Row {
        id: controlRow
        anchors.centerIn: parent
        readonly property int baseIconSize: 40
        property bool isPlaying: false
        ComIconBtn {
            id: orderBtn
            iconName: "ri.order-play-fill"
            iconSize: parent.baseIconSize - 20
        }
        Item {
            width: 20
            height: 10
        }
        ComIconBtn {
            id: prevBtn
            iconName: "fa.step-backward"
            iconSize: parent.baseIconSize - 20
            onClicked: playBarViewModel.preMusic()
        }
        ComIconBtn {
            id: playBtn
            iconName: playBarViewModel.isPlaying ? "ri.pause-circle-fill" : "ri.play-circle-fill"
            iconColor: palette.highlight
            onClicked: {
                playBarViewModel.isPlaying = !playBarViewModel.isPlaying;
            }
        }
        ComIconBtn {
            id: nextBtn
            iconName: "fa.step-forward"
            iconSize: parent.baseIconSize - 20
            onClicked: playBarViewModel.nextMusic()
        }
        Item {
            width: 20
            height: 10
        }
        ComIconBtn {
            id: volumeBtn
            iconName: _volumeBar.mute ? "ri.volume-mute-line" : "ri.volume-up-line"
            iconSize: parent.baseIconSize - 20
            onClicked: {
                _volumeBar.open();
            }
            tipName: "音量:" + _volumeBar.volume + "%"
            VolumeBar {
                id: _volumeBar
                x: -(width - parent.width) / 2
                y: -height
                volume: playBarViewModel.volume
                onVolumeChanged: {
                    playBarViewModel.setVolume(volume);
                }
                onMuteChanged: {
                    playBarViewModel.setMute(mute);
                }
            }
        }
    }
}
